<d-button class="demo-margin" (btnClick)="setUnCheckableRelation('downward')">选中父不再选中子</d-button>
<d-button bsStyle="common" class="demo-margin" (btnClick)="setUnCheckableRelation('upward')">选中子不再选中父</d-button>
<d-button bsStyle="common" class="demo-margin" (btnClick)="toggleIcon()">使用自定义展开/收起图标</d-button>
<d-button bsStyle="common" class="demo-margin" (btnClick)="expandAll()">展开全部表格</d-button>
<d-data-table
  [dataSource]="basicDataSource"
  [tableWidthConfig]="tableWidthConfig"
  [checkableRelation]="checkableRelation"
  [loadChildrenTable]="loadChildrenTable"
  [loadAllChildrenTable]="loadAllChildrenTable"
  [scrollable]="true"
  [tableOverflowType]="'overlay'"
>
  <thead dTableHead [checkable]="true">
    <tr dTableRow>
      <th dHeadCell [nestedColumn]="true" [iconFoldTable]="iconParentOpen" [iconUnFoldTable]="iconParentClose">title</th>
      <th dHeadCell>name</th>
      <th dHeadCell>status</th>
      <th dHeadCell>date</th>
    </tr>
  </thead>
  <tbody dTableBody>
    <ng-template let-rowItem="rowItem" let-rowIndex="rowIndex" let-nestedLayer="nestedLayer" let-nestedIndex="nestedIndex">
      <tr dTableRow [ngClass]="{ 'table-row-selected': rowItem.$checked }">
        <td dTableCell class="devui-checkable-cell">
          <d-checkbox
            [ngModelOptions]="{ standalone: true }"
            [ngModel]="rowItem.$checked"
            [halfchecked]="rowItem.$halfChecked"
            [disabled]="rowItem.$checkDisabled"
            (ngModelChange)="onRowCheckChange($event, rowIndex, nestedIndex, rowItem)"
            dTooltip
            [content]="rowItem.$checkBoxTips"
            [position]="['top', 'right', 'bottom', 'left']"
          >
          </d-checkbox>
        </td>
        <td
          dTableCell
          [nestedColumn]="true"
          [nestedColumnIndent]="20"
          [rowItem]="rowItem"
          [nestedLayer]="nestedLayer"
          [iconFoldTable]="iconParentOpen"
          [iconUnFoldTable]="iconParentClose"
          (toggleChildTableEvent)="onChildTableToggle($event, rowItem)"
        >
          {{ rowItem['title'] }}
        </td>
        <td dTableCell>{{ rowItem['lastName'] }}</td>
        <td dTableCell>{{ rowItem['status'] }}</td>
        <td dTableCell>{{ rowItem['dob'] | i18nDate : 'short' : false }}</td>
      </tr>
    </ng-template>
  </tbody>
</d-data-table>
